<!doctype html>
<html lang="zh-cn">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <script>
        var data = [
            { "name": "F1802101", "group_id": "561432607" },
            { "name": "F1802102", "group_id": "815244754" },
            { "name": "F1802103", "group_id": "816568543" },
            { "name": "F1802104", "group_id": "816568273" },
            { "name": "F1802105", "group_id": "816463064" },
            { "name": "F1802106", "group_id": "810015502" },
            { "name": "F1802107", "group_id": "806179530" },
            { "name": "F1802108", "group_id": "545789101" },
            { "name": "F1802109", "group_id": "812369961" },
            { "name": "F1802110", "group_id": "816957909" },
            { "name": "F1802111", "group_id": "817902071" },
            { "name": "F1802112", "group_id": "817770223" },
            { "name": "F1802113", "group_id": "818196757" },
            { "name": "F1802114", "group_id": "611015986" },
            { "name": "F1802115", "group_id": "816154430" },
            { "name": "F1802116", "group_id": "787251310" },
            { "name": "F1802117", "group_id": "805695995" },
            { "name": "F1802118", "group_id": "810687004" },
            { "name": "F1802119", "group_id": "742915054" },
            { "name": "F1802120", "group_id": "809472764" },
            { "name": "F1802121", "group_id": "816311771" },
            { "name": "F1802122", "group_id": "816671221" },
            { "name": "F1802123", "group_id": "857326610" },
            { "name": "F1802124", "group_id": "796821852" },
            { "name": "F1802125", "group_id": "816942718" },
            { "name": "F1802126", "group_id": "816731636" },
            { "name": "F1802127", "group_id": "795878655" },
            { "name": "F1802128", "group_id": "811748090" },
            { "name": "F1802129", "group_id": "812464828" },
            { "name": "F1802130", "group_id": "815963994" },
            { "name": "F1802131", "group_id": "816643173" },
            { "name": "F1802132", "group_id": "816897441" },
            { "name": "F1802133", "group_id": "817235504" },
            { "name": "F1802134", "group_id": "814240382" },
            { "name": "F1802135", "group_id": "809827546" },
            { "name": "F1802136", "group_id": "720983291" },
            { "name": "F1802137", "group_id": "816595492" },
            { "name": "F1802138", "group_id": "859283849" },
            { "name": "F1802139", "group_id": "808799384" },
            { "name": "F1802140", "group_id": "611121297" },
            { "name": "F1802141", "group_id": "816575699" },
            { "name": "F1802142", "group_id": "567745918" },
            { "name": "F1802143", "group_id": "816564250" },
            { "name": "F1802144", "group_id": "816600851" },
            { "name": "F1802145", "group_id": "817222629" }
        ]
    </script>

    <title>Group-List</title>
    <style>
        .card {
            margin: 1em;
        }

        .copy {
            float: right;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="navbar-brand">F18工试班班群列表</div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">学科交流群列表 </a>
                </li>
                <!-- <li class="nav-item">
          <a class="nav-link" href="freshQA/index.html">新生Q&A </a>
        </li> -->
                <li class="nav-item">
                    <a class="nav-link" href="lessons/index.html">2018-2019学年秋季学期开课表</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="epqg/index.html">F18工试班群</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <center>
                <h1>F18工试班班群列表</h1>
            </center>
        </div>
    </div>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-6 col-lg-4" v-for="{name, group_id, description} in list">
                <div class="card">
                    <!-- <img class="card-img-top" :src="`./img/${group_id}.jpg`" alt="Card image cap"> -->
                    <div class="card-body">
                        <h5 class="card-title">{{ name }}</h5>
                        <p class="lead">{{ group_id }}</p>
                        <p class="card-text">{{ description }}</p>
                        <button class="btn btn-secondary btn-sm copy" :data-clipboard-text="group_id">复制群号码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <div class="row">
                <div class="col"></div>
                <div class="col">
                    <img src="../img/logo.png" style="max-height: 30vw; max-width: 150px" alt="">
                </div>
                <div class="col">
                    <img src="../img/qrcode.png" style="max-height: 30vw; max-width: 150px" alt="">
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: data
            }
        })
    </script>
    <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
    <script>
        var clipboard = new Clipboard('.copy');

        clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);

            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            window.alert('复制失败')
        });
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>